<template>
    <view class="page" :class="['page', { 'dark-mode': isDarkMode }, currentTheme]" @tap="hideDropdownMenu">
        <!-- 状态栏占位 -->
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

        <!-- 标题栏 -->
        <view class="title-bar">
            <text class="page-title">我分享的礼簿</text>
        </view>

        <!-- 搜索框 -->
        <view class="search-wrapper">
            <view class="search-bar">
                <text class="search-icon bigfont big-sousuo"></text>
                <input type="text" placeholder="搜索分享记录"
                    :placeholder-style="'color:' + (isDarkMode ? 'rgba(255, 255, 255, 0.6)' : '#999')"
                    class="search-input" v-model="searchText" @input="handleSearch" />
                <text v-if="searchText" class="clear-icon bigfont big-guanbi" @tap="clearSearch"></text>
            </view>
        </view>

        <!-- 分享列表 -->
        <scroll-view class="share-list" scroll-y @scrolltolower="loadMore" @refresherrefresh="onRefresh"
            :refresher-enabled="true" :refresher-triggered="isRefreshing" refresher-background="transparent">

            <view v-if="loading && !isRefreshing && shareList.length === 0" class="list-status">
                <text class="status-text">加载中...</text>
            </view>

            <view v-else-if="shareList.length === 0" class="list-status empty-status">
                <view class="empty-icon">📝</view>
                <text class="empty-text">暂无分享记录</text>
            </view>

            <view v-else class="share-list-content">
                <view class="share-item" v-for="(item, index) in shareList" :key="index">
                    <view class="book-main">
                        <view class="book-cover">
                            <image :src="item.books?.coverImageUrl" mode="aspectFill"></image>
                        </view>
                        <view class="book-info">
                            <text class="book-title">{{ item.books?.title || '未知礼簿' }}</text>
                            <view class="book-meta">
                                <text class="book-date">{{ formatDate(item.createTime) }}</text>
                                <text class="type-tag" :class="{ 'readonly': item.type === 'readonly' }">
                                    {{ item.type === 'readonly' ? '只读' : '可编辑' }}
                                </text>
                            </view>
                            <view class="book-stats">
                                <view class="book-amount">
                                    <text class="amount-label">分享进度</text>
                                    <view class="share-progress">
                                        <view class="progress-bar">
                                            <view class="progress-fill"
                                                :style="{ width: ((item.shareReceives?.length || 0) / (item.shareCount || 1) * 100) + '%' }">
                                            </view>
                                        </view>
                                        <text class="amount-value">{{ item.shareReceives?.length || 0 }}/{{
                                            item.shareCount || 0 }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!-- 添加更多按钮 -->
                        <view class="more-actions">
                            <text class="more-icon bigfont big-gengduo"
                                @tap.stop="showDropdownMenu($event, index)"></text>
                        </view>
                    </view>
                </view>

                <!-- 加载更多状态 -->
                <view v-if="loading && shareList.length > 0" class="load-more loading">
                    <view class="loading-indicator"></view>
                    <text class="load-more-text">加载中...</text>
                </view>
                <view v-else-if="!hasMore" class="load-more">
                    <text class="load-more-text">没有更多了</text>
                </view>
            </view>
        </scroll-view>

        <!-- 使用下拉菜单组件 -->
        <DropdownMenu v-model:visible="showMenu" :position="menuPosition">
            <view class="dropdown-menu">
                <view class="dropdown-item" @tap="receiver(currentBookIndex)">
                    <text class="dropdown-icon bigfont big-eye"></text>
                    <text>查看接受人</text>
                </view>
                <view class="dropdown-item" @tap="showQrCode(currentBookIndex)" v-if="currentShare && currentShare.shareReceives &&
                    currentShare.shareReceives.length < currentShare.shareCount">
                    <text class="dropdown-icon bigfont big-erweima"></text>
                    <text>分享码</text>
                </view>
                <view class="dropdown-item delete" @tap="deleteShare(currentBookIndex)">
                    <text class="dropdown-icon bigfont big-shanchu"></text>
                    <text>取消分享</text>
                </view>
            </view>
        </DropdownMenu>

        <!-- 在 template 最后添加抽屉组件 -->
        <DrawerPopup v-model="showReceiverDrawer" title="接收人列表" height="50%">
            <view class="receiver-list">
                <view v-if="currentReceivers.length === 0" class="empty-receiver">
                    <text>暂无接收记录</text>
                </view>
                <view v-else class="receiver-item" v-for="(item, index) in currentReceivers" :key="index">
                    <view class="receiver-info">
                        <view class="receiver-left">
                            <view class="avatar-wrapper">
                                <image class="receiver-avatar" :src="item.wechatUser?.avatar" mode="aspectFill"></image>
                            </view>
                            <view class="receiver-details">
                                <text class="receiver-name">{{ item.wechatUser?.nickname || '未知用户' }}</text>
                                <view class="time-wrapper">
                                    <text class="time-icon bigfont big-shijian"></text>
                                    <text class="receiver-time">{{ formatDate(item.createTime) }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="receiver-right">
                            <button class="cancel-btn" @tap="cancelReceive(item.id)">
                                <text class="cancel-icon bigfont big-shanchu"></text>
                                <text class="cancel-text">取消</text>
                            </button>
                        </view>
                    </view>
                </view>
            </view>
        </DrawerPopup>

        <!-- 添加隐藏的canvas元素 -->
        <canvas canvas-id="qrcode"
            style="width: 400px; height: 400px; position: fixed; left: -1000px; top: -1000px;"></canvas>

        <!-- QrCodeModal组件 -->
        <QrCodeModal v-model:visible="showQrCodeModal" :qr-code-url="currentQrCodeUrl" :title="'分享码'"
            @close="showQrCodeModal = false" />
    </view>
</template>

<script setup lang="ts">
import { cancelShare, getMyShareList } from '@/api/share';
import { cancelShareReceive, getShareReceiveList } from '@/api/share-receive';
import DrawerPopup from '@/components/DrawerPopup.vue';
import DropdownMenu from '@/components/DropdownMenu.vue';
import QrCodeModal from '@/components/QrCodeModal.vue';
import { currentTheme, isDarkMode } from '@/store/theme';
import { onMounted, ref, watch } from 'vue';
import QRCode from 'weapp-qrcode';

interface ShareReceive {
    id: string;
    shareId: number;
    receiveUserId: string;
    createTime: string;
    wechatUser: {
        id: string;
        openId: string;
        nickname: string;
        avatar: string;
        createTime: string;
        updateTime: string;
    };
}

interface ShareRecord {
    id: string;
    bookId: string;
    createTime: string;
    type: string;
    shareCount: number;
    books: {
        id?: string;
        title?: string;
        coverImageUrl: string;
        searchValue: string;
        guestCount: number;
    };
    shareReceives?: ShareReceive[];
}

interface ApiResponse<T = any> {
    code: number;
    msg: string;
    data: T;
}

// 分享列表数据
const shareList = ref<ShareRecord[]>([]);
const loading = ref(false);
const isRefreshing = ref(false);
const hasMore = ref(true);
const searchText = ref('');

const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    searchValue: ''
});

// 添加统计数据
const totalShares = ref(0);
const totalBooks = ref(0);

// 添加下拉菜单相关的变量
const showMenu = ref(false);
const menuPosition = ref({
    top: '0px',
    right: '0px'
});
const currentBookIndex = ref(-1);

// 在 script setup 中添加
const showReceiverDrawer = ref(false);
const currentReceivers = ref<ShareReceive[]>([]);

// 添加二维码相关的变量
const showQrCodeModal = ref(false);
const currentQrCodeUrl = ref('');
const currentShare = ref<ShareRecord | null>(null);

// 获取分享列表
const getList = async (reset = false) => {
    if (reset) {
        queryParams.value.pageNum = 1;
        shareList.value = [];
        hasMore.value = true;
    }

    if (!hasMore.value || loading.value) return;

    loading.value = true;
    try {
        const res = await getMyShareList(queryParams.value);
        const { records = [], totalRow = 0, totalShares: total = 0, totalBooks: books = 0 } = res?.data || {};

        // 更新统计数据
        totalShares.value = total;
        totalBooks.value = books;

        // 转换数据结构
        const formattedRecords = records.map((item: ShareRecord) => ({
            id: item.id,
            createTime: item.createTime,
            shareLink: `${item.bookId}`,
            type: item.type,
            shareCount: item.shareCount,
            books: item.books,
            shareReceives: item.shareReceives
        }));

        if (reset) {
            shareList.value = formattedRecords;
        } else {
            shareList.value = [...shareList.value, ...formattedRecords];
        }

        hasMore.value = shareList.value.length < totalRow;
        queryParams.value.pageNum++;
    } catch (error) {
        console.error('获取分享列表失败:', error);
        uni.showToast({
            title: '获取数据失败',
            icon: 'error'
        });
    } finally {
        loading.value = false;
        isRefreshing.value = false;
    }
};

// 下拉刷新
const onRefresh = () => {
    isRefreshing.value = true;
    getList(true);
};

// 加载更多
const loadMore = () => {
    if (hasMore.value && !loading.value) {
        getList();
    }
};

// 搜索处理
let searchTimer: any = null;
const handleSearch = () => {
    if (searchTimer) {
        clearTimeout(searchTimer);
    }
    searchTimer = setTimeout(() => {
        queryParams.value.searchValue = searchText.value;
        getList(true);
    }, 300);
};

// 清除搜索
const clearSearch = () => {
    searchText.value = '';
    queryParams.value.searchValue = '';
    getList(true);
};

// 复制链接
const handleCopy = (item: ShareRecord) => {
    uni.setClipboardData({
        data: String(item.bookId),
        success: () => {
            uni.showToast({
                title: '链接已复制',
                icon: 'success'
            });
        }
    });
};

// 删除分享
const deleteShare = (index: number) => {
    const item = shareList.value[index];
    if (item) {
        uni.showModal({
            title: '提示',
            content: '确定要取消这条分享吗？',
            success: async (res) => {
                if (res.confirm) {
                    try {
                        const response = await cancelShare(item.id);
                        const result = response as unknown as ApiResponse;
                        if (result.code === 200) {
                            uni.showToast({
                                title: '取消成功',
                                icon: 'success'
                            });
                            getList(true);
                        } else {
                            uni.showToast({
                                title: result.msg || '取消失败',
                                icon: 'error'
                            });
                        }
                    } catch (error: any) {
                        uni.showToast({
                            title: error.msg || '取消失败',
                            icon: 'error'
                        });
                    }
                }
            }
        });
    }
    hideDropdownMenu();
};

// 查看分享人
const handleViewSharedUsers = (item: ShareRecord) => {
    // TODO: 实现查看分享人的逻辑
    uni.showToast({
        title: '功能开发中',
        icon: 'none'
    });
};

// 监听主题变化，立即更新导航栏样式
watch(isDarkMode, () => {
    uni.setNavigationBarColor({
        frontColor: isDarkMode.value ? '#ffffff' : '#000000',
        backgroundColor: isDarkMode.value ? '#121212' : '#ffffff',
        animation: {
            duration: 0,
            timingFunc: 'linear'
        }
    });
}, { immediate: true });

// 状态栏高度
const statusBarHeight = ref(0);

// 格式化日期
const formatDate = (dateStr: string) => {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 修改显示下拉菜单的方法
const showDropdownMenu = (event: Event, index: number) => {
    // 如果菜单已经显示，则关闭它
    if (showMenu.value && currentBookIndex.value === index) {
        hideDropdownMenu();
        return;
    }

    const query = uni.createSelectorQuery();
    query.selectAll('.more-icon').boundingClientRect((data: any) => {
        if (Array.isArray(data) && data[index]) {
            const rect = data[index];
            const windowWidth = uni.getSystemInfoSync().windowWidth;
            menuPosition.value = {
                top: `${rect.bottom + 8}px`,
                right: `${windowWidth - rect.right - 5}px`
            };
            currentBookIndex.value = index;
            currentShare.value = shareList.value[index];
            showMenu.value = true;
        }
    }).exec();
};

// 隐藏下拉菜单
const hideDropdownMenu = () => {
    showMenu.value = false;
};

// 取消某人的分享
const cancelReceive = async (receiveId: string) => {
    uni.showModal({
        title: '提示',
        content: '确定要取消该用户的接收权限吗？',
        success: async (res) => {
            if (res.confirm) {
                try {
                    await cancelShareReceive(receiveId);
                    uni.showToast({
                        title: '取消成功',
                        icon: 'success'
                    });
                    // 刷新当前接收列表
                    if (currentBookIndex.value >= 0) {
                        const item = shareList.value[currentBookIndex.value];
                        const res = await getShareReceiveList(item.id);
                        currentReceivers.value = res.data || [];
                    }
                } catch (error) {
                    uni.showToast({
                        title: '取消失败',
                        icon: 'error'
                    });
                }
            }
        }
    });
};

// 查看接收人列表
const receiver = async (index: number) => {
    const item = shareList.value[index];
    if (item) {
        try {
            const res = await getShareReceiveList(item.id);
            currentReceivers.value = res.data || [];
            showReceiverDrawer.value = true;
        } catch (error) {
            uni.showToast({
                title: '获取接收列表失败',
                icon: 'error'
            });
        }
    }
    hideDropdownMenu();
};

// 修改显示二维码的方法
const showQrCode = async (index: number) => {
    const share = shareList.value[index];
    if (!share) {
        uni.showToast({
            title: '获取分享信息失败',
            icon: 'none'
        });
        return;
    }

    try {
        // 显示加载提示
        uni.showLoading({
            title: '生成中...',
            mask: true
        });

        // 生成二维码
        const qrContent = `${share.id}`;

        // 确保先清除之前的内容
        const ctx = uni.createCanvasContext('qrcode');
        ctx.clearRect(0, 0, 400, 400);
        ctx.draw();

        await new Promise<void>((resolve) => setTimeout(resolve, 100)); // 等待清除完成

        new QRCode({
            width: 400,
            height: 400,
            canvasId: 'qrcode',
            text: qrContent,
            foreground: isDarkMode.value ? '#FFFFFF' : '#000000',
            background: isDarkMode.value ? '#1E1E1E' : '#FFFFFF',
            padding: 20,
            callback: (res: any) => {
                // 转换为图片
                uni.canvasToTempFilePath({
                    canvasId: 'qrcode',
                    width: 400,
                    height: 400,
                    destWidth: 800,
                    destHeight: 800,
                    success: (res: any) => {
                        currentQrCodeUrl.value = res.tempFilePath;
                        showQrCodeModal.value = true;
                        uni.hideLoading();
                    },
                    fail: (err: any) => {
                        console.error('生成二维码图片失败:', err);
                        uni.hideLoading();
                        uni.showToast({
                            title: '生成二维码失败',
                            icon: 'none'
                        });
                    }
                });
            }
        });

        showMenu.value = false;
    } catch (error) {
        console.error('生成二维码失败:', error);
        uni.hideLoading();
        uni.showToast({
            title: '生成二维码失败',
            icon: 'none'
        });
    }
};

onMounted(() => {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    statusBarHeight.value = systemInfo.statusBarHeight || 0;

    getList();
});
</script>

<style lang="scss">
/* 基础样式 */
.page {
    min-height: 100vh;
    background-color: var(--theme-background);
    ;
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
    touch-action: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

.status-bar {
    width: 100%;
    background-color: transparent;
    flex-shrink: 0;
}

/* 标题栏样式 */
.title-bar {
    padding: 20rpx 32rpx;
    flex-shrink: 0;
}

.page-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.dark-mode .page-title {
    color: #fff;
}

/* 搜索框样式 */
.search-wrapper {
    padding: 20rpx 32rpx;
    background-color: transparent;
    flex-shrink: 0;
}

.search-bar {
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background: #ffffff;
    border: 2rpx solid #e8e8e8;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;

    .search-icon {
        font-size: 36rpx;
        color: #999;
        margin-right: 12rpx;
    }

    .search-input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
        color: #333;
        background: transparent;
    }

    .clear-icon {
        font-size: 32rpx;
        color: #999;
        padding: 12rpx;
    }

    &:focus-within {
        border-color: rgba(76, 175, 80, 0.5);
        box-shadow: 0 2rpx 12rpx rgba(76, 175, 80, 0.1);
        background: #ffffff;
    }
}

/* 列表样式 */
.share-list {
    flex: 1;
    height: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.share-list-content {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    padding: 32rpx;
}

.share-item {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    will-change: background-color, border-color;
}

.book-main {
    display: flex;
    gap: 24rpx;
    align-items: flex-start;
}

.book-cover {
    width: 140rpx;
    height: 140rpx;
    border-radius: 12rpx;
    overflow: hidden;
    flex-shrink: 0;
}

.book-cover image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; // 防止文本溢出
}

.book-title {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 12rpx;
    line-height: 1.3;
}

.book-meta {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 16rpx;
}

.book-date {
    font-size: 24rpx;
    color: #999;
}

.type-tag {
    display: inline-flex;
    align-items: center;
    padding: 2rpx 12rpx;
    font-size: 22rpx;
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
    border: 1rpx solid rgba(76, 175, 80, 0.2);
    border-radius: 6rpx;
    height: 32rpx;
}

.type-tag.readonly {
    color: #FF9800;
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.2);
}

.book-stats {
    margin-top: auto;
}

.book-amount {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.amount-label {
    font-size: 24rpx;
    color: #999;
}

.share-progress {
    display: flex;
    align-items: center;
    gap: 12rpx;
    width: 100%;
}

.progress-bar {
    flex: 1;
    height: 12rpx;
    background: #f0f0f0;
    border-radius: 6rpx;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50 0%, #45a049 100%);
    border-radius: 6rpx;
    transition: width 0.3s ease;
}

.amount-value {
    font-size: 24rpx;
    color: #666;
    min-width: 70rpx;
    text-align: right;
}

.more-actions {
    position: absolute;
    top: 24rpx;
    right: 16rpx;
}

.more-icon {
    padding: 8rpx;
    font-size: 36rpx;
    color: #999;
    line-height: 1;
}

/* 列表状态 */
.list-status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400rpx;
}

.empty-status {
    text-align: center;
}

.empty-icon {
    font-size: 80rpx;
    margin-bottom: 16rpx;
}

.empty-text {
    font-size: 28rpx;
    color: #999;
}

.status-text {
    font-size: 28rpx;
    color: #999;
}

.load-more {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
    color: #999;
    font-size: 24rpx;
}

.loading-indicator {
    width: 32rpx;
    height: 32rpx;
    border: 4rpx solid #f3f3f3;
    border-top: 4rpx solid #333;
    border-radius: 50%;
    margin-right: 16rpx;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 暗黑模式样式 */
.dark-mode {
    background-color: #121212 !important;
}

.dark-mode .search-wrapper {
    background-color: transparent !important;
}

.dark-mode .search-bar {
    background: #2a2a2a;
    border-color: #3d3d3d;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

    &:focus-within {
        border-color: rgba(76, 175, 80, 0.5);
        background: #333;
        box-shadow: 0 2rpx 12rpx rgba(76, 175, 80, 0.15);
    }

    .search-input {
        color: rgba(255, 255, 255, 0.9);
    }

    .search-icon,
    .clear-icon {
        color: rgba(255, 255, 255, 0.6);
    }
}

.dark-mode .share-item {
    background: #1e1e1e !important;
    border: 2rpx solid rgba(255, 255, 255, 0.1);
}

.dark-mode .book-title {
    color: #fff !important;
}

.dark-mode .book-date,
.dark-mode .amount-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

.dark-mode .amount-value,
.dark-mode .guest-count .count {
    color: rgba(255, 255, 255, 0.9) !important;
}

.dark-mode .guest-count {
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .share-actions {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .action-btn {
    background: #2c2c2c;
    color: rgba(255, 255, 255, 0.9);
}

.dark-mode .action-btn.delete {
    color: #ff4d4f;
}

.dark-mode .status-text,
.dark-mode .load-more {
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .loading-indicator {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.9);
}

/* 统计卡片样式 */
.stats-card {
    margin: 32rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stats-value {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
}

.stats-label {
    font-size: 24rpx;
    color: #999;
}

.stats-divider {
    width: 2rpx;
    height: 60rpx;
    background-color: #eee;
}

/* 暗黑模式样式补充 */
.dark-mode .stats-card {
    background: #1e1e1e;
    border: 2rpx solid rgba(255, 255, 255, 0.1);
}

.dark-mode .stats-value {
    color: rgba(255, 255, 255, 0.9);
}

.dark-mode .stats-label {
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .stats-divider {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 保留下拉菜单项样式 */
.dropdown-menu {
    background: #ffffff;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
    border-radius: 8rpx;
    position: relative;
    min-width: 240rpx;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    right: 20rpx;
    top: -16rpx;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16rpx 16rpx 16rpx;
    border-color: transparent transparent #ffffff transparent;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx;
    gap: 16rpx;
    white-space: nowrap;
    border-bottom: 2rpx solid #f5f5f5;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:active {
    background-color: #f5f5f5;
}

.dropdown-icon {
    font-size: 32rpx;
    color: #333;
    width: 32rpx;
    height: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-item text {
    font-size: 28rpx;
    color: #333;
    white-space: nowrap;
}

.dropdown-item.delete {
    color: #ff4d4f;
}

.dropdown-item.delete .dropdown-icon,
.dropdown-item.delete text {
    color: #ff4d4f;
}

/* 暗黑模式下拉菜单项样式 */
.dark-mode .dropdown-menu {
    background: #1e1e1e;
}

.dark-mode .dropdown-menu::before {
    border-color: transparent transparent #1e1e1e transparent;
}

.dark-mode .dropdown-item {
    border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
}

.dark-mode .dropdown-item:active {
    background-color: #2c2c2c;
}

.dark-mode .dropdown-icon,
.dark-mode .dropdown-item text {
    color: rgba(255, 255, 255, 0.9);
}

.dark-mode .dropdown-item.delete .dropdown-icon,
.dark-mode .dropdown-item.delete text {
    color: #ff4d4f;
}

/* 暗黑模式样式 */
.dark-mode .more-icon {
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .more-icon:active {
    opacity: 0.7;
}

/* 接收人列表样式更新 */
.receiver-list {
    padding: 32rpx;
}

.empty-receiver {
    text-align: center;
    padding: 80rpx 0;
    color: #999;
    font-size: 28rpx;
}

.receiver-item {
    padding: 24rpx;
    border: 1rpx solid #e8e8e8;
    transition: all 0.3s ease;
    background: #ffffff;
    margin-bottom: 16rpx;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.receiver-item:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
}

.receiver-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.receiver-left {
    display: flex;
    align-items: center;
    gap: 20rpx;
}

.avatar-wrapper {
    position: relative;
    width: 80rpx;
    height: 80rpx;
    flex-shrink: 0;
}

.receiver-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 16rpx;
    background-color: #f5f5f5;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.receiver-details {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.receiver-name {
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
}

.time-wrapper {
    display: flex;
    align-items: center;
    gap: 4rpx;
    opacity: 0.8;
}

.time-icon {
    font-size: 22rpx;
    color: #999;
}

.receiver-time {
    font-size: 22rpx;
    color: #999;
}

.receiver-right {
    display: flex;
    align-items: center;
}

.cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8rpx;
    font-size: 24rpx;
    color: #ff4d4f;
    padding: 8rpx 20rpx;
    border-radius: 100rpx;
    background: rgba(255, 77, 79, 0.08);
    border: none !important;
    transition: all 0.3s ease;
    line-height: 1;
    height: 48rpx;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    position: relative;
    overflow: hidden;
}

.cancel-btn::after {
    border: none;
}

.cancel-icon {
    font-size: 24rpx;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cancel-text {
    line-height: 1;
}

.cancel-btn:active {
    transform: scale(0.95);
    background: rgba(255, 77, 79, 0.15);
}

/* 暗黑模式样式补充 */
.dark-mode .cancel-btn {
    background: rgba(255, 77, 79, 0.12);
    border: none !important;
}

.dark-mode .cancel-btn::after {
    border: none;
}

.dark-mode .receiver-item {
    background: #1e1e1e;
    border: 1rpx solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.dark-mode .receiver-item:hover {
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.3);
}

.dark-mode .receiver-avatar {
    background-color: #2c2c2c;
}

.dark-mode .receiver-name {
    color: rgba(255, 255, 255, 0.9);
}

.dark-mode .time-icon,
.dark-mode .receiver-time {
    color: rgba(255, 255, 255, 0.5);
}

.dark-mode .empty-receiver {
    color: rgba(255, 255, 255, 0.6);
}
</style>